import React, {useEffect, useRef} from 'react';
import echarts from 'echarts';

interface echartsProps {
    style?:{
        width?: string,
        height?: string
    },
    option: any
}
/**
 * ECharts 图表 本地模块
 * @param props style宽高 option 参考 ECharts
 */
const ECharts = (props: echartsProps) => {
    const { style = {width: 600, height: 300} } = props;

    const echartsRef = useRef(null);

    let myChart: any = null;

    const initECharts = () => {
        let echartsBox: HTMLDivElement | null = echartsRef.current;
        if(echartsBox) {
            myChart = echarts.init(echartsBox);
            let {option} = props;
            if(!option) {
                throw new Error('请传入echarts的参数');
            }
            myChart.setOption(option);
        }
    }

    const resizeListener = () => {
        myChart && myChart.resize()
    }

    // useEffect(() => {
    //     let {style} = props;
    //     setMapStyle(style);
    // }, [style])

    useEffect(() => {
        initECharts();
        window.addEventListener('resize', resizeListener);
        return () => {window.removeEventListener('resize', resizeListener)}
    //eslint-disable-next-line
    }, [])

    return(
        <div>
            <div ref={echartsRef} style={style}></div>
        </div>
    )
}

export default ECharts

// let option = {
//     title: {
//         text: 'ECharts 入门示例',
//     },
//     tooltip: {
//     },
//     legend: {
//         data:['销量', '利润', '比率']
//     },
//     xAxis: {
//         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
//     },
//     yAxis: {
//     },
//     series: [
//         {
//             name: '销量',
//             type: 'bar',
//             data: [5, 20, 36, 10, 10, 20]
//         },
//         {
//             name: '利润',
//             type: 'bar',
//             data: [30, 25, 15, 20, 20, 35]
//         },
//         {
//             name: '比率',
//             type: 'line',
//             data: [35, 30, 20, 25, 25, 40]
//         }]
//     };